<template>
  <default-layout>
    <header-back text="开具证明" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div v-if="status === 'form'" key="form">
          <div class="form-list">
            <div class="form-list-item">
              <span class="label">姓名：</span>
              <span class="content">{{info.aac003}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案号：</span>
              <span class="content">{{info.archiveCode}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">身份证号：</span>
              <span class="content">{{info.aac002}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案状态：</span>
              <span class="content">{{info.archiveStatusName}}</span>
            </div>
          </div>
          <div class="form">
            <yd-cell-group>
              <!--<yd-cell-item>
                <span slot="left" class="label required">联系电话：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写手机号'}, {reg: $regex.phone, msg: '请填写正确的手机号'}]"
                  v-model="form.mobilePhone"
                  ref="mobilePhone"
                  placeholder="请填写手机号"></xf-input>
              </yd-cell-item>-->
              <yd-cell-item>
                <span slot="left" class="label required">申请证明：</span>
                <yd-textarea
                  maxlength="150"
                  placeholder="请填写您要申请的证明及理由"
                  slot="right"
                  v-model.trim="form.remark"></yd-textarea>
              </yd-cell-item>
              <div class="next">
                <div class="next">
                  <mt-button size="large" type="primary" @click="onSubmit">提交申请</mt-button>
                </div>
              </div>
            </yd-cell-group>
          </div>
        </div>
        <certify-success v-if="status === 'success'" key="success"></certify-success>
      </transition>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import CertifySuccess from './success.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {mapGetters} from 'vuex'
  import {personalRecord} from '../../../common/js/util'

  export default {
    components: {
      DefaultLayout,
      CertifySuccess,
      XfInput,
      HeaderBack},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          remark: '',
          mobilePhone: '',
          materialType: 6
        },
        status: 'form',
        info: {}
      }
    },
    methods: {
      onSubmit() {
        const form = Object.assign({}, this.form)
        this.$post('/sapi/preaudit/materialPreaudit/post', form, loading => { this.$message.loading(loading) }).then(res => {
          this.status = 'success'
        })
      },
      getInfo() {
        personalRecord().then(res => {
          this.info = res.archivesSearchForm
        })
      }
    },
    created() {
      // this.form.mobilePhone = this.userInfo.aae005 || ''
      this.getInfo()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .form-list{
    margin: 0 0 .2rem 0;
  }
  .file{
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .img-right{
    display: flex;
    align-items: center;
    padding: .2rem 0;
    width: 100%;
    .img-box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 .2rem;
      .upload-img,img{
        width: 2rem;
      }
      span{
        margin: .15rem 0 0 0;
      }
    }
  }
</style>
